<template>
	<view>
		<stop isBack>
			<view slot="content">设置常用功能</view>
		</stop>
		<view class="bcf pad3 mart3">
			<view class="pad3 flrc pos-r">
				<view class="flex1 fwb fs12 c11 list-style-1">已选功能</view>
				<ripple></ripple>
			</view>
			<view class="flex-r flex-wrap flex-start mart3">
				<view class="w25 pos-r c13 flcc padb3" @tap="selectIt(item)" v-for="item in selected">
					<view class=" wh15-15 round3 shadow flcc pos-r">
						<!-- <text class="fa fa-cubes fa-2x"></text> -->
						<view>
							<image :src="pic(item.pic)" mode="aspectFill" class="wh10-10"></image>
						</view>
					</view>
					<view class="mart1 c11">{{item.name}}</view>
					<ripple-black></ripple-black>
				</view>
			</view>
			
			<view  v-if="selected.length === 0" class="pad2 tac">
				<view class="pad7 bdda bc13">未选择任何功能</view>
			</view>
		</view>
		<view v-if="datas.length > 0">
			<view class="bcf pad3 mart3" v-for="parent in datas" v-if="$com.isInArray(parent.id,userIds)">
				<view class="list-style-2 mar3">{{parent.name}}</view>
				<view class="flex-r flex-wrap flex-start mart3">
					<view class="w25  c13 flcc padb3 pos-r" @tap="selectIt(item)" v-if="$com.isInArray(item.id,userIds)" v-for="item in parent.sons">
						<view class=" wh15-15 round3 shadow flcc pos-r">
							<!-- <text class="fa fa-cubes fa-2x"></text> -->
							<view>
								<image :src="pic(item.pic)" mode="aspectFill" class="wh10-10"></image>
							</view>
						</view>
						<view class="mart1 c11">{{item.name}}</view>
						<ripple-black></ripple-black>
						<view class="pos-a t0 r0 c01 fs16" v-if="$com.isInArray(item.id,selectedIds)">
							<view class="fa fa-check-circle"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="datas.length == 0">
			<view class="mar5 pad5 tac bdda round3 bcf">暂未无权限</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas: [],
				userIds: [],
				myIsLoading: false,
				selected: [],
				selectedIds: [],
			}
		},
		methods: {
			selectIt(item) {
				this.log(item)
				if (this.$com.isInArray(item.id, this.selectedIds)) {

					let reBuildData = []
					let reBuildDataIds = []
					for (let index in this.selected) {
						let row = this.selected[index]
						if (row.id !== item.id) {
							reBuildData.push(row)
							reBuildDataIds.push(row.id)
						}
					}
					this.selected = reBuildData
					this.selectedIds = reBuildDataIds
				} else {
					this.selected.push(item)
					this.selectedIds.push(item.id)
				}
				this.$com.setLocData("workSpaceLocalData", this.selected)
				this.$com.setLocData("workSpaceLocalDataIds", this.selectedIds)
			}
		},
		mounted() {
			let workSpaceLocalData = this.$com.getLocDataObject("workSpaceLocalData")
			if (this.isbool(workSpaceLocalData)) {
				this.log(workSpaceLocalData)
				this.selected = workSpaceLocalData
			}

			let workSpaceLocalDataIds = this.$com.getLocDataObject("workSpaceLocalDataIds")
			if (this.isbool(workSpaceLocalDataIds)) {
				this.log(workSpaceLocalDataIds)
				this.selectedIds = workSpaceLocalDataIds
			}

			let data = this.$com.getLocDataObject("workSpaceData")
			if (this.isbool(data)) {
				this.myIsLoading = false;
				this.datas = data
			}

			let userIds = this.$com.getLocDataObject("workSpaceUserId")
			if (this.isbool(userIds)) {
				this.userIds = userIds
			}

			this.$api.get('/api/machine/user_work_space', {}, res => {
				if (!this.$com.isbool(res.d)) {
					this.$com.showToast('权限异常')
				} else {
					this.userIds = res.d
					this.$com.setLocData("workSpaceUserId", res.d)
				}
			})
			this.$api.get("/api/user/workSpaces", {}, res => {
				this.datas = res.d
				this.$com.setLocData("workSpaceData", res.d)
			})

		}
	}
</script>

<style>

</style>
